<template>
  <div class="home-hall">
    <!-- header -->
    <van-nav-bar
      title="大厅"
      class="home-hall__nav"
      ref="header"
      left-text="排行榜"
      right-text="查降权"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <!-- search -->
    <van-search
      class="home-hall__search"
      v-model="queryKey"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    />
    <!-- notice -->
    <van-notice-bar
      class="home-hall__notice"
      color="#1989fa"
      background="#ecf9ff"
      left-icon="info-o"
    >{{ noticeText }}</van-notice-bar>
    <!-- empty -->
    <van-empty v-if="iconItems.length === 0">
      <template #description>
        <span>暂无您搜索的平台</span>
      </template>
      <template #default>
        <span @click="openWin('platform')">点击可添加需要的平台</span>
      </template>
    </van-empty>
    <!-- main -->
    <better-scroll class="home-hall__wrapper" :data="iconItems">
      <van-grid :column-num="4" class="home-hall__grid">
        <van-grid-item v-for="(item, index) in iconItems" :key="index" @click="onAddPlatform(item)">
          <span
            class="home-hall__grid-type"
            :class="{active: item.hidden}"
          >{{ !item.hidden ? '免费' : '维护' }}</span>
          <van-image :src="item.icon" />
          <span>{{ item.label }}</span>
        </van-grid-item>
      </van-grid>
    </better-scroll>
  </div>
</template>

<script>
import { deepCopy } from "@/utils/index";
export default {
  name: "HomeHall",
  props: {
    // 导航索引
    active: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      iconItems: [
        {
          label: "响叮当",
          hidden: true,
          opened: "待启动",
          icon: require("./../../assets/img/xiangdingdang.png"),
          index: 0,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "丑小鸭",
          hidden: false,
          opened: "待启动",
          icon: require("./../../assets/img/chouxiaoya.jpg"),
          index: 1,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "秋天乐园",
          hidden: false,
          opened: "待启动",
          icon: require("./../../assets/img/langwo.png"),
          index: 2,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "私房钱",
          hidden: true,
          opened: "待启动",
          icon: require("./../../assets/img/sifangqian.png"),
          index: 3,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "小金矿",
          hidden: false,
          opened: "待启动",
          icon: require("./../../assets/img/xiaojinkuang.png"),
          index: 4,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "大黄蜂",
          hidden: true,
          opened: "待启动",
          icon: require("./../../assets/img/dahuangfeng.png"),
          index: 5,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "大师兄",
          hidden: true,
          opened: "待启动",
          icon: require("./../../assets/img/dashixiong.png"),
          index: 6,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "聚人气",
          hidden: false,
          opened: "待启动",
          icon: require("./../../assets/img/jurenqi.png"),
          index: 7,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "开心果",
          hidden: true,
          opened: "待启动",
          icon: require("./../../assets/img/kaixinguo.png"),
          index: 8,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "小牛班",
          hidden: false,
          opened: "待启动",
          icon: require("./../../assets/img/xiaoniuban.png"),
          index: 9,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "有单网",
          hidden: false,
          opened: "待启动",
          icon: require("./../../assets/img/youdanwang.png"),
          index: 10,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "宅仔",
          hidden: false,
          opened: "待启动",
          icon: require("./../../assets/img/zhaizai.png"),
          index: 11,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "征服者",
          hidden: false,
          opened: "待启动",
          icon: require("./../../assets/img/zhengfuzhe.png"),
          index: 12,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "鸿昌科技",
          hidden: false,
          opened: "待启动",
          icon: require("./../../assets/img/timg.jpg"),
          index: 13,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "天玺",
          hidden: false,
          opened: "待启动",
          icon: require("./../../assets/img/tianxi.jpg"),
          index: 14,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "麦田",
          hidden: true,
          opened: "待启动",
          icon: require("./../../assets/img/mt.png"),
          index: 15,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "云美贝",
          hidden: false,
          opened: "待启动",
          icon: require("./../../assets/img/mt.png"),
          index: 16,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "淘气旺",
          hidden: true,
          opened: "待启动",
          icon: require("./../../assets/img/mischievous.png"),
          index: 17,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "小猴子",
          hidden: true,
          opened: "待启动",
          icon: require("./../../assets/img/monkey.png"),
          index: 18,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "闹闹派单",
          hidden: false,
          opened: "待启动",
          icon: require("./../../assets/img/noisy.png"),
          index: 19,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "淘助跑",
          hidden: true,
          opened: "待启动",
          icon: require("./../../assets/img/run-up.png"),
          index: 20,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "月光宝盒",
          hidden: false,
          opened: "待启动",
          icon: require("./../../assets/img/moon.png"),
          index: 21,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "泡泡糖",
          hidden: true,
          opened: "待启动",
          icon: require("./../../assets/img/bubble.png"),
          index: 22,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "有单做",
          hidden: false,
          opened: "待启动",
          icon: require("./../../assets/img/single.jpg"),
          index: 23,
          user: "",
          pass: "",
          type: "",
          startFlag: false,
          content: []
        },
        {
          label: "白名单",
          hidden: true,
          opened: "待启动",
          icon: require("./../../assets/img/white-list.jpg"),
          index: 24,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "大联盟",
          hidden: true,
          opened: "待启动",
          icon: require("./../../assets/img/grand-alliance.jpg"),
          index: 25,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "乐淘",
          hidden: true,
          opened: "待启动",
          icon: require("./../../assets/img/le-tao.jpg"),
          index: 26,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "致承",
          hidden: false,
          opened: "待启动",
          icon: require("./../../assets/img/bearing.png"),
          index: 27,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "D66",
          hidden: false,
          opened: "待启动",
          icon: require("./../../assets/img/D66.jpg"),
          index: 28,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "美丽日记",
          hidden: false,
          opened: "待启动",
          icon: require("./../../assets/img/beauty.png"),
          index: 29,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "小黑猪",
          hidden: false,
          opened: "待启动",
          icon: require("./../../assets/img/pig.jpg"),
          index: 30,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "淘宝圈",
          hidden: true,
          opened: "待启动",
          icon: require("./../../assets/img/creator.jpg"),
          index: 31,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "麦家乐",
          hidden: true,
          opened: "待启动",
          icon: require("./../../assets/img/maijiale.jpg"),
          index: 32,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "优麦菜",
          hidden: false,
          opened: "待启动",
          icon: require("./../../assets/img/vegetable.jpg"),
          index: 33,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "砖圈圈",
          hidden: false,
          opened: "待启动",
          icon: require("./../../assets/img/brick-circle.png"),
          index: 34,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "金牛座",
          hidden: false,
          opened: "待启动",
          icon: require("./../../assets/img/taurus.png"),
          index: 35,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "白白赚",
          hidden: true,
          opened: "待启动",
          icon: require("./../../assets/img/white.jpg"),
          index: 36,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "如意宝",
          hidden: false,
          opened: "待启动",
          icon: require("./../../assets/img/ruyi.png"),
          index: 37,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "隔壁王叔叔",
          hidden: false,
          opened: "待启动",
          icon: require("./../../assets/img/uncle-wang.jpg"),
          index: 38,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "小红帽",
          hidden: false,
          opened: "待启动",
          icon: require("./../../assets/img/red-hat.png"),
          index: 39,
          user: "",
          pass: "",
          type: "",
          startFlag: false,
          content: []
        },
        {
          label: "蓝樱桃",
          hidden: false,
          opened: "待启动",
          icon: require("./../../assets/img/cherry.png"),
          index: 40,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "赚星星",
          hidden: false,
          opened: "待启动",
          icon: require("./../../assets/img/stars.png"),
          index: 41,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "飞鱼购",
          hidden: true,
          opened: "待启动",
          icon: require("./../../assets/img/fish.jpg"),
          index: 42,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "米来宝",
          hidden: false,
          opened: "待启动",
          icon: require("./../../assets/img/milaboo.png"),
          index: 43,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "掌萌人",
          hidden: false,
          opened: "待启动",
          icon: require("./../../assets/img/meng.png"),
          index: 44,
          user: "",
          pass: "",
          type: "",
          content: []
        },
        {
          label: "聚峰园",
          hidden: false,
          opened: "待启动",
          icon: require("./../../assets/img/meng.png"),
          index: 45,
          user: "",
          pass: "",
          type: "",
          startFlag: false,
          content: []
        },
        {
          label: "冒险岛",
          hidden: true,
          opened: "待启动",
          icon: require("./../../assets/img/meng.png"),
          index: 46,
          user: "",
          pass: "",
          type: "",
          startFlag: false,
          content: []
        },
        {
          label: "胖果果",
          hidden: false,
          opened: "待启动",
          icon: require("./../../assets/img/meng.png"),
          index: 47,
          user: "",
          pass: "",
          type: "",
          startFlag: false,
          content: []
        },
        {
          label: "红树林",
          hidden: false,
          opened: "待启动",
          icon: require("./../../assets/img/meng.png"),
          index: 48,
          user: "",
          pass: "",
          type: "",
          startFlag: false,
          content: []
        }
      ],
      queryKey: "",
      noticeText:
        "经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。",
      defaultArray: [],
      resultIcon: []
    };
  },
  watch: {
    queryKey() {
      this.onSearch();
    }
  },
  created() {
    this.resultIcon =
      this.$store.getters.iconItems.length !== 0
        ? this.$store.getters.iconItems
        : this.$storage.has("iconItems")
        ? this.$storage.get("iconItems")
        : [];
    this.defaultArray = deepCopy(this.iconItems);
  },
  mounted() {
    const _this = this;
    this.$nextTick(() => {
      var statusBar = window.api.require("statusBar");
      //异步返回结果：
      statusBar.getStatusBarHeight(function(ret) {
        _this.$refs.header.$el.style.height = ret.statusHeight + 44 + "px";
        _this.$refs.header.$el.style.paddingTop = ret.statusHeight + "px";
        _this.$refs.header.$el.getElementsByClassName(
          "van-nav-bar__left"
        )[0].style.top = ret.statusHeight + "px";
        _this.$refs.header.$el.getElementsByClassName(
          "van-nav-bar__right"
        )[0].style.top = ret.statusHeight + "px";
      });
    });
  },
  methods: {
    // 排行榜
    onClickLeft() {
      this.openWin("ranking");
    },
    // 查降权
    onClickRight() {
      this.openWin("search");
    },
    // 搜索
    onSearch() {
      this.iconItems = deepCopy(this.defaultArray);
      let j = 0;

      let newArray = [];
      this.iconItems.forEach((item, i) => {
        if (item.label.indexOf(this.queryKey) !== -1) {
          newArray[j++] = this.iconItems[i];
        }
      });
      this.iconItems = newArray;
    },
    // 新增平台
    onAddPlatform(item) {
      if (!item.hidden) {
        this.$dialog
          .confirm({
            title: "提示",
            message:
              "是否添加<span style='color: #e4393c;'>" +
              item.label +
              "</span>平台到任务",
            confirmButtonColor: "#e4393c",
            beforeClose: (action, done) => {
              done();
              if (action === "confirm") {
                // 保存任务
                let index = this.resultIcon.findIndex(
                  items => items.label === item.label
                );
                if (index === -1) {
                  this.resultIcon.push(item);
                  this.$toast("添加成功");
                  this.$store.commit("SET_ICONITEMS", this.resultIcon);
                  this.$storage.set("iconItems", this.resultIcon);
                } else {
                  this.$toast("已添加该平台");
                }
              }
            }
          })
          .catch(() => {
            // on cancel
          });
      } else {
        this.$toast("平台维护中");
      }
    },
    openWin(name) {
      window.api.openWin({
        name: name,
        url: `./` + name + `.html`,
        bgColor: "#fff",
        pageParam: {
          active: this.active
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.home-hall {
  width: 100%;
  height: calc(100vh - 50px);
  @include flex($direction: column, $flexWrap: nowrap);
}
</style>

<style lang="scss">
.home-hall {
  .home-hall__search,
  .home-hall__notice {
    width: 100%;
  }
  .home-hall__wrapper {
    width: 100%;
    flex: 1;
    overflow: hidden;
    .home-hall__grid {
      .van-grid-item {
        .van-image__img {
          width: 32px;
          height: 32px;
          border-radius: 50%;
        }

        span {
          font-size: 12px;
          margin-top: 6px;
          &.home-hall__grid-type {
            width: 80%;
            line-height: 20px;
            text-align: center;
            background: #e4393c;
            color: #fff;
            border-radius: 22px;
            margin-bottom: 6px;
            &.active {
              background: #ddd;
            }
          }
        }
      }
    }
  }
}
</style>